<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import Tabbar from '@/components/TabbarCustom.vue'
  import { useUsercodeStore } from '@/store/usercode.js'

  const showmoney = ref(true)

  // 获取用户信息
  const userInfo = ref({})
  const history = ref([])
  async function getUserInfo() {
    const res = await http.request({
      url: '/api/user/userMsg',
      method: 'POST',
      data: {},
    })
    console.log('user')
    userInfo.value = res.data.data
    history.value = res.data.footPrint

    // if (res.data.address_status == 1) {
    //   uni.utils.toast('背包商品即将自动发货，请填写地址。')
    //   setTimeout(() => {
    //     uni.navigateTo({
    //       url: `/minePage/editaddress/index`,
    //     })
    //   }, 2000)
    // }
  }

  //跳转购买
  function goBuy(item) {
    console.log(item)
    if (item.type == 1) {
      uni.navigateTo({
        url: `/homePage/goodsinfo/index?id=${item.goods_id}`,
      })
    } else if (item.type == 2) {
      uni.navigateTo({
        url: `/drawPage/wxDraw/index?id=${item.box_id}`,
      })
    } else if (item.type == 3) {
      uni.navigateTo({
        url: `/drawPage/txDraw/index?id=${item.box_id}`,
      })
    } else if (item.type == 4) {
      uni.navigateTo({
        url: `/drawPage/treasureDraw/index?id=${item.box_id}`,
      })
    }
  }

  //查看积分
  function checkPoint() {
    uni.navigateTo({
      url: `/minePage/pointdetail/index`,
    })
  }

  //钱包充值
  function checkWallet() {
    uni.navigateTo({
      url: `/minePage/wallet/index`,
    })
  }

  //历史记录
  function checkhistory() {
    uni.navigateTo({
      url: `/minePage/history/index`,
    })
  }

  //查看发货单
  function checkOrder(index) {
    uni.navigateTo({
      url: `/minePage/order/index?index=${index}`,
    })
  }
  //商城
  function checkMallOrder() {
    uni.navigateTo({
      url: `/minePage/mallorder/index`,
    })
  }

  // 消息通知
  function checkNotice() {
    uni.navigateTo({
      url: `/minePage/notice/index`,
    })
  }

  // 优惠券
  function checkCoupon() {
    uni.navigateTo({
      url: `/minePage/coupon/index`,
    })
  }

  // 地址
  function checkAddress() {
    uni.navigateTo({
      url: `/minePage/address/index`,
    })
  }

  // 心愿单
  function checkHope() {
    uni.navigateTo({
      url: `/minePage/hopelist/index`,
    })
  }

  //期待
  function theToast() {
    uni.utils.toast('敬请期待')
    // uni.navigateTo({
    // 	url: `/minePage/invite/index`,
    // })
  }

  // 联系客服
  const servicepopup = ref()
  function service() {
    servicepopup.value.open('center')
  }

  function scan(url) {
    uni.previewImage({
      urls: [url],
      longPressActions: {
        itemList: ['发送给朋友', '保存图片', '收藏'],
        success: (res) => {},
        fail: (res) => {
          console.log(res.errMsg)
        },
      },
    })
  }
  //设置
  function checkSetings() {
    const userCodeStore = useUsercodeStore()
    if (userCodeStore.usercode.token) {
      uni.navigateTo({
        url: `/minePage/setting/index`,
      })
    } else {
      uni.navigateTo({
        url: `/pages/login/login`,
      })
    }
  }

  //人脸识别
  function authentication() {
    const shebei = ref(process.env.VUE_APP_PLATFORM)
    console.log(shebei)
    if (shebei.value == 'mp-weixin') {
      if (userInfo.value.is_sm == 1) {
        uni.navigateTo({
          url: `/minePage/authenticationsuccess/index`,
        })
      } else {
        uni.navigateTo({
          url: `/minePage/authentication/index`,
        })
      }
    } else {
      wx.showModal({
        title: '温馨提示',
        content:
          '鉴于您是平台的优质用户，请前往微信小程序，搜索 欧魂online 进行实名制认证。或联系客服进行手动实名认证',
        showCancel: false,
        confirmText: '我知道了',
        success: function (res) {
          if (res.confirm) {
            //下载新版本，并重新应用
          }
        },
      })
    }
  }

  //隐藏接口
  const hidding = ref(true)
  function hidePart() {
    // if (userCodeStore.usercode.mobile == '18254076917') {
    //   hidding.value = false
    // } else {
    hidding.value = true
    // }
  }
  const rank_open = ref('')
  async function getRank() {
    const res = await http.request({
      url: '/api/index/rankinglist',
      method: 'POST',
      data: {},
    })
    if (res.st == 1) {
      rank_open.value = true
    } else {
      rank_open.value = false
    }
  }
  onShow(() => {
    getRank()
    hidePart()
    // uni.hideTabBar()
    getUserInfo()
  })
</script>

<template>
  <view class="mine-content" style="padding-bottom: 182rpx">
    <view class="top-bg">
      <view class="top-bg-left">
        <view class="" style="position: relative; bottom: -16rpx">
          <!-- <view class="avatar-border"> </view> -->
          <image
            style="
              width: 120rpx;
              height: 120rpx;
              border-radius: 60rpx;
              margin: 14rpx;
            "
            :src="userInfo.himg"
            mode=""
          ></image>
        </view>
        <view class="my-detail">
          <view class="" style="margin-bottom: 14rpx; font-size: 32rpx">
            {{ userInfo.nickname }}
          </view>
          <!-- <view class="" style="font-size: 22rpx">
						{{ userInfo.signature }}
					</view> -->
        </view>
      </view>
      <view class="top-bg-right" @click="checkSetings">
        <image
          style="width: 60rpx; height: 60rpx"
          src="../../static/mine-set.png"
          mode=""
        ></image>
      </view>
    </view>
    <view class="mine-detail">
      <view class="my-count">
        <!-- <view class="my-count-title"> 我的账户 </view> -->
        <view class="my-count-bottom">
          <view class="integral" @click="checkPoint">
            <view class="integral-title" style="flex-shrink: 0"> 积分 </view>
            <view class="integral-balance">
              <image
                style="width: 32rpx; height: 32rpx"
                src="../../static/icon.png"
                mode=""
              ></image>
              <text>{{ userInfo.integral }}</text>
            </view>
          </view>
          <view class="money" @click="checkWallet" v-if="hidding">
            <view class="money-title" style="flex-shrink: 0"> 星石 </view>
            <view class="money-balance">
              <text v-if="showmoney">{{ userInfo.balance }}</text>
              <text v-else>******</text>
              <image
                v-if="showmoney"
                style="width: 32rpx; height: 32rpx"
                src="../../static/open-eye.png"
                mode=""
                @tap.stop="showmoney = false"
              ></image>
              <image
                v-else
                style="width: 32rpx; height: 32rpx"
                src="../../static/close-eye.png"
                mode=""
                @tap.stop="showmoney = true"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <view class="my-history">
        <view class="history-left">
          <view class="history-none" v-if="!history.length">暂无浏览记录</view>
          <view class="history-list" v-else>
            <view
              class="history-item"
              v-for="(item, index) in history"
              :key="'history' + index"
              @click="goBuy(item)"
            >
              <view
                class=""
                style="
                  height: 142rpx;
                  width: 142rpx;
                  margin-bottom: 6rpx;
                  overflow: hidden;
                "
              >
                <image
                  v-if="item.type == 1"
                  style="
                    width: 142rpx;
                    height: 142rpx;
                    margin-bottom: 6rpx;
                    border-radius: 10rpx;
                  "
                  :src="item.goods_img"
                  mode="heightFix"
                ></image>
                <image
                  v-else
                  style="
                    width: 142rpx;
                    height: 142rpx;
                    margin-bottom: 6rpx;
                    border-radius: 10rpx;
                  "
                  :src="item.box_img"
                  mode="heightFix"
                ></image>
              </view>
              <view class="history-item-name" v-if="item.type == 1">
                {{ item.goods_name }}
              </view>
              <view class="history-item-name" v-else>
                {{ item.box_name }}
              </view>
            </view>
          </view>
        </view>
        <view class="history-right" @click="checkhistory"
          >历史记录
          <image
            style="width: 20rpx; height: 20rpx"
            src="../../static/history.png"
            mode=""
          ></image>
        </view>
      </view>
      <view class="my-delivery">
        <view class="delivery-title">
          <view class="delivery-title-left"> 发货订单 </view>
          <view class="delivery-title-right" @click="checkOrder(0)">
            查看全部>
          </view>
        </view>
        <view class="delivery-content">
          <view class="delivery-content-item" @click="checkOrder(0)">
            <image
              style="width: 60rpx; height: 60rpx"
              src="../../static/all.png"
              mode=""
            ></image>
            <view class="delivery-content-item-name"> 全部 </view>
          </view>
          <view
            class="delivery-content-item"
            style="position: relative"
            @click="checkOrder(1)"
          >
            <image
              style="width: 60rpx; height: 60rpx"
              src="../../static/wait-delivery.png"
              mode=""
            ></image>
            <view class="delivery-content-item-name"> 待发货 </view>
            <view
              v-if="userInfo.wait_num && userInfo.wait_num != 0"
              class=""
              style="
                position: absolute;
                top: 0rpx;
                right: 0rpx;
                width: 28rpx;
                height: 28rpx;
                border-radius: 50%;
                background-color: #ffe60f;
                font-size: 16rpx;
                line-height: 28rpx;
                text-align: center;
                font-weight: 700;
                color: #3d3d3d;
              "
            >
              {{ userInfo.wait_num }}
            </view>
          </view>
          <view
            class="delivery-content-item"
            style="position: relative"
            @click="checkOrder(2)"
          >
            <image
              style="width: 60rpx; height: 60rpx"
              src="../../static/wait-have.png"
              mode=""
            ></image>
            <view class="delivery-content-item-name"> 待收货 </view>
            <view
              class=""
              v-if="userInfo.delivery_num && userInfo.delivery_num != 0"
              style="
                position: absolute;
                top: 0rpx;
                right: 0rpx;
                width: 28rpx;
                height: 28rpx;
                border-radius: 50%;
                background-color: #ffe60f;
                font-size: 16rpx;
                line-height: 28rpx;
                text-align: center;
                font-weight: 700;
                color: #3d3d3d;
              "
            >
              {{ userInfo.delivery_num }}
            </view>
          </view>
          <view class="delivery-content-item" @click="checkOrder(3)">
            <image
              style="width: 60rpx; height: 60rpx"
              src="../../static/complete.png"
              mode=""
            ></image>
            <view class="delivery-content-item-name"> 已完成 </view>
          </view>
        </view>
      </view>
      <view class="function-list">
        <view class="function-list-title" style="margin-bottom: 50rpx">
          功能列表
        </view>
        <view class="function-list-content">
          <!-- <view class="content-top"> -->
          <view class="function-list-content-item" @click="checkMallOrder">
            <image
              style="width: 56rpx; height: 56rpx"
              src="../../static/mine-order.png"
              mode=""
            ></image>
            <view class="function-list-content-item-name"> 商城订单 </view>
          </view>
          <view
            class="function-list-content-item"
            style="position: relative"
            @click="checkNotice"
            v-if="hidding"
          >
            <image
              style="width: 56rpx; height: 56rpx"
              src="../../static/notice.png"
              mode=""
            ></image>
            <view class="function-list-content-item-name"> 消息通知 </view>
            <view
              class=""
              v-if="
                userInfo.case_open_msg_num && userInfo.case_open_msg_num != 0
              "
              style="
                position: absolute;
                top: -6rpx;
                right: 44rpx;
                width: 28rpx;
                height: 28rpx;
                border-radius: 50%;
                background-color: #ffe60f;
                font-size: 16rpx;
                line-height: 28rpx;
                text-align: center;
                font-weight: 700;
                color: #3d3d3d;
              "
            >
              {{ userInfo.case_open_msg_num }}
            </view>
          </view>
          <view class="function-list-content-item" @click="checkAddress">
            <image
              style="width: 56rpx; height: 56rpx"
              src="../../static/mine-address.png"
              mode=""
            ></image>
            <view class="function-list-content-item-name"> 地址 </view>
          </view>
          <view
            class="function-list-content-item"
            @click="service"
            v-if="hidding"
          >
            <image
              style="width: 56rpx; height: 56rpx"
              src="../../static/mine-serve.png"
              mode=""
            ></image>
            <view class="function-list-content-item-name"> 客服 </view>
          </view>
          <!-- </view> -->
          <!-- <view class="content-bottom"> -->
          <view class="function-list-content-item" @click="checkHope">
            <image
              style="width: 56rpx; height: 56rpx"
              src="../../static/mine-hope.png"
              mode=""
            ></image>
            <view class="function-list-content-item-name"> 心愿单 </view>
          </view>
          <view class="function-list-content-item" @click="checkCoupon">
            <image
              style="width: 56rpx; height: 56rpx"
              src="../../static/mine-coupon.png"
              mode=""
            ></image>
            <view class="function-list-content-item-name"> 优惠券 </view>
          </view>
          <view
            class="function-list-content-item"
            @click="theToast"
            v-if="hidding"
          >
            <image
              style="width: 56rpx; height: 56rpx"
              src="../../static/mine-business.png"
              mode=""
            ></image>
            <!-- <view class="function-list-content-item-name">
								商家入驻
							</view> -->
            <view class="function-list-content-item-name"> 联系我们 </view>
          </view>
          <view
            class="function-list-content-item"
            @click="authentication"
            v-if="hidding && rank_open"
          >
            <image
              style="width: 56rpx; height: 56rpx"
              src="../../static/mine-realname.png"
              mode=""
            ></image>
            <view class="function-list-content-item-name"> 实名认证 </view>
          </view>
          <!-- </view> -->
          <!-- <view class="content-bottom">
						<view class="function-list-content-item" @click="checkSetings">
							<image
								style="width: 46rpx; height: 46rpx"
								src="../../static/mine-set.png"
								mode=""
							></image>
							<view class="function-list-content-item-name">
								设置
							</view>
						</view>
					</view> -->
        </view>
      </view>

      <view
        class=""
        v-if="!hidding"
        style="
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #b5b5b5;
          text-align: center;
        "
      >
        联系我们：193 5982 7483 9：00~12：00 13：00~17：00
      </view>
    </view>
    <Tabbar :current="3"></Tabbar>

    <!-- 客服弹出层 -->
    <uni-popup ref="servicepopup" type="center">
      <view class="servicepopup-content">
        <image
          @longpress="
            scan('https://ojqn.wm2177.com/wechat_imgs/mine/service.png')
          "
          src="https://ojqn.wm2177.com/wechat_imgs/mine/service.png"
          style="width: 100%; height: 100%"
          mode=""
        ></image>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .top-bg-right {
    position: absolute;
    right: 40rpx;
    bottom: 20rpx;
  }
  .mine-content {
    // height: 100vh;
    background-color: #f5f5f5;
    .top-bg {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 426rpx;
      padding: 152rpx 18rpx 122rpx 8rpx;
      box-sizing: border-box;
      background: url('https://ojqn.wm2177.com/wechat_imgs/mine/mine-bg.png')
        no-repeat;
      background-size: contain;
      color: #fff;
      position: relative;
      .top-bg-left {
        display: flex;
        align-items: center;
        .avatar-border {
          position: absolute;
          top: -12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          padding-top: 19rpx;
          width: 152rpx;
          height: 152rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/mine/avatar-border.png')
            no-repeat;
          background-size: contain;
          .avatar {
            width: 120rpx;
            height: 120rpx;
          }
        }
        .my-detail {
          height: 152rpx;
          padding-top: 66rpx;
          box-sizing: border-box;
        }
      }
    }
    .mine-detail {
      position: relative;
      top: 20rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      .my-count {
        // height: 184rpx;
        // padding: 20rpx 20rpx 0 20rpx;
        // border-radius: 12rpx;
        // background-color: #fff;
        // .my-count-title {
        //   margin-bottom: 20rpx;
        //   font-size: 28rpx;
        // }
        .my-count-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .integral {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 320rpx;
            height: 68rpx;
            padding: 0 18rpx;
            box-sizing: border-box;
            border-radius: 8rpx;
            background-color: #fdfaf2;
            .integral-title {
              font-size: 24rpx;
            }
            .integral-balance {
              display: flex;
              align-items: center;
              color: #9b9b9d;
              image {
                margin-right: 16rpx;
              }
            }
          }
          .money {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 320rpx;
            height: 68rpx;
            padding: 0 18rpx;
            box-sizing: border-box;
            border-radius: 8rpx;
            background-color: #fafdfe;
            .money-title {
              font-size: 24rpx;
            }
            .money-balance {
              display: flex;
              align-items: center;
              color: #9b9b9d;
              image {
                margin-left: 16rpx;
              }
            }
          }
        }
      }

      .my-history {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 216rpx;
        margin-top: 20rpx;
        padding: 0 12rpx;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 12rpx;
        .history-left {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          .history-none {
            font-size: 24rpx;
            color: #d8d8d8;
          }
          .history-list {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            width: 100%;
            padding: 0 16rpx;
            box-sizing: border-box;
            .history-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-right: 16rpx;
              &:last-child {
                margin-right: 0;
              }
              .history-item-name {
                width: 142rpx;
                font-size: 22rpx;
                text-align: center;
                color: #3d3d3d;
                display: -webkit-box;
                -webkit-line-clamp: 1; /* 限制为两行 */
                -webkit-box-orient: vertical;
                overflow: hidden; /* 隐藏超出部分 */
                text-overflow: ellipsis; /* 超出部分用省略号表示 */
                white-space: normal; /* 允许换行 */
                /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
              }
            }
          }
        }
        .history-right {
          width: 22rpx;
          color: #8f8f8f;
          font-size: 22rpx;
        }
      }
      .my-delivery {
        height: 232rpx;
        margin-top: 26rpx;
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 12rpx;
        background-color: #fff;
        .delivery-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .delivery-title-left {
            font-size: 32rpx;
            font-weight: 600;
            color: #1f1f1f;
          }
          .delivery-title-right {
            font-size: 24rpx;
            color: #929292;
          }
        }
        .delivery-content {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 100%;
          width: 100%;
          .delivery-content-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 80rpx;
            .delivery-content-item-name {
              font-size: 24rpx;
              font-weight: 600;
              margin-top: 10rpx;
              color: #1f1f1f;
            }
          }
        }
      }
      .function-list {
        height: 454rpx;
        margin-top: 26rpx;
        // margin-bottom: 26rpx;
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 12rpx;
        background-color: #fff;
        .function-list-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #1f1f1f;
        }
        .function-list-content {
          display: flex;
          // flex-direction: column;
          // align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          height: 65%;
          width: 100%;
          color: #1f1f1f;
          .content-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
          }
          .content-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
          }
          .function-list-content-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 138rpx;
            .function-list-content-item-name {
              font-size: 24rpx;
              font-weight: 600;
            }
          }
        }
      }
    }
    .servicepopup-content {
      width: 702rpx;
      height: 906rpx;
      border-radius: 40rpx;
      overflow: hidden;
    }
  }
</style>
